<template>
	<div class="login">
		<!-- topbar -->
		<van-nav-bar 
			right-text="取消"
			@click-right="$router.push({name: 'Home'})">
			<template #left>
			  <div class="nav-left">
			    <div class="logo">
			      <img class="logo_img" src="@/assets/images/logo.png" alt="" />
			    </div>
			    <div class="logo-text"></div>
			  </div>
			</template>
		</van-nav-bar>
		<!-- 登录盒子 -->
		<div class="user-box">
			<div class="user-title">
				<div class="welcome">登录</div>
			</div>
			<!-- 表单 -->
			<van-form>
			  <van-field
			    v-model="userInfo.phone"
			    name="手机号"
			    placeholder="手机号"
					autocomplete="off"
			  />
			  <van-field
			    v-model="userInfo.password"
			    :type="isShowPass ? 'text' : 'password'"
			    name="密码"
			    placeholder="密码"
					autocomplete="off"
					:right-icon="isShowPass ? 'eye-o' : 'closed-eye'"
					@click-right-icon="toggleShowPass"
			  />
				<div class="forget">
					<span>忘记密码?</span>
				</div>
			  <div class="commit-btn">
			    <van-button round block color="skyblue" @click="login">登录</van-button>
			  </div>
				<div class="commit-btn">
				  <van-button round block type="default" @click="isShow = true">注册</van-button>
				</div>
			</van-form>
		</div>
		<!-- 弹出层 -->
		<popup 
			:isShow="isShow" 
			@click-overlay="clickOverlay" 
		/>
	</div>
</template>

<script>
	import popup from './popup.vue'
	import bus from '@/utils/eventBus.js'
	import { login } from '@/api/user.js'
	export default {
		name: 'login',
		data() {
			return {
				// 用户信息对象
				userInfo: {
					phone: '',
					password: ''
				},
				// 是否显示密码
				isShowPass: false,
				// 是否显示弹出层
				isShow: false
			}
		},
		created() {
			this.$on('click-overlay', () => {
				this.clickOverlay()
			})
		},
		methods: {
			// 显示隐藏密码
			toggleShowPass() {
				this.isShowPass = !this.isShowPass
			},
			// 弹出层遮罩点击事件
			clickOverlay() {
				this.isShow = false
			},
			// 用户登录
			login() {
				if (!this.userInfo.phone || !this.userInfo.password) return this.$toast('数据不能为空!')
				this.$toast.loading({
					message: '登录中...',
					forbidClick: true
				})
				login(this.userInfo)
				.then(res => {
					if(res.data.code !== 200) return this.$toast.fail('请求异常,请重新尝试!')
					this.$toast.success(res.data.msg)
					window.sessionStorage.setItem('token', res.data.token)
					this.$router.push({name: 'Home'})
					// 通知首页更新用户数据
					bus.$emit('refresh-userinfo')
				})
				.catch(err => {
					return this.$toast.fail('请求失败,请重新尝试！')
				})
			}
		},
		components: {
			popup
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/css/element.scss';
	.login{
		@include container;
		.nav-left{
			display: flex;
			align-items: center;
			.logo{
				width: 34px;
				height: 34px;
				border-radius: 50%;
				overflow: hidden;
				img{
					width: 100%;
				}
			}
			.logo-text{
				font-size: 16px;
				margin-left: 10px;
				font-weight: bold;
			}
		}
		/deep/ .van-nav-bar__text{
			color: #3498db;
			font-weight: bold;
		}
		.user-box{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 0 30px;
			.user-title{
				margin-bottom: 20px;
				text-align: center;
				.welcome{
					font-size: 37.5px;
					font-weight: bold;
				}
			}
			/deep/ .van-field{
				background-color: transparent;
				border-bottom: 1px #ccc solid;
				width: 85%;
				margin: auto;
				font-size: 15px;
			}
			.forget{
				text-align: right;
				margin-top: 20px;
				font-size: 14px;
				margin-right: 22px;
				color: #666;
			}
			.commit-btn{
				margin-top: 20px;
				padding: 0 20px;
			}
		}
	}
</style>